<template>
  <div class="main">
    <!-- 头部 -->
    <Topbox/> 
    <div class="content"> 
        <!-- left -->
        <div class="leftBox">
            <Statistics/>
            <Typestatistics/>
            <Devicestatus/>
        </div>
        <div class="center">  
            <img src="../static/3d.png" alt="" srcset="">
        </div> 
        <!-- right -->
        <div class="RightBox">
            <Proportion/>
            <Record/>
        </div>
    </div>
  </div>
</template>
<script setup>
import Topbox from '../components/Topbox.vue'
import Statistics from '../components/mainLeft/Statistics.vue'
import Typestatistics from '../components/mainLeft/Typestatistics.vue'
import Devicestatus from '../components/mainLeft/Devicestatus.vue'
import Proportion from '../components/mainRight/Proportion.vue'
import Record from '../components/mainRight/Record.vue' 
</script> 

<style scoped>
.main {
  width: 100%;
  height: auto;
}
.header {
    margin-top: 20px;
  width: 100%;
  height: auto;
  text-align: center;
  background: url(../static/top-bg.png);
  background-size:cover
}
.content{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}
.leftBox{
    width: 30%; 
    padding: 0 0.1rem;;
    margin-right: 2%;
}
.alltitle{
    background-image: url(../static/img/右1标题.png);
}

.center{
    width: 30%;
    flex: 1;
}
.center img{
    margin-top: 25%;
    width: 750px;
    display: inline-block;
}
.RightBox{
    width: 30%;
    padding: 0 0.1rem;;
    margin-left: 2%;
}
</style>
